<template>
  <k-form-modal
    width="middle"
    title="调整保证金"
    class="k-form-grid"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="保证金" label-width="54px" class="k-form-item__24">
      <span>{{ state.model.dyj_safty }}</span>
    </el-form-item>
    <el-form-item label-width="0px" prop="inc_type" class="k-form-item__6">
      <el-radio-group v-model="state.model.inc_type">
        <el-radio :label="1">增加</el-radio>
        <el-radio :label="2">减少</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label-width="10px" prop="safty" class="k-form-item__18">
      <el-input v-model="state.model.safty" clearable placeholder="请输入整数" maxlength="10" />
    </el-form-item>

    <el-form-item label-width="0px" prop="remark" class="k-form-item__24">
      <el-input
        v-model="state.model.remark"
        maxlength="200"
        allow-clear
        placeholder="请输入调整原因"
        show-word-limit
        type="textarea"
        rows="6"
      />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue';
import { useFormModal } from '@crud/index';
import { colonelAdjust } from '@/api/crm-agency/dyj/colonel';
import { ElMessage } from 'element-plus';
defineOptions({
  name: 'AdjustBondModal'
});
const emits = defineEmits(['success']);
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    inc_type: 1,
    safty: '',
    remark: '',
    colonel_id: undefined,
    extend_type: 2,
    dyj_safty: ''
  },
  rules: {
    safty: [{ required: true, message: '请输入调整保证金额' },
      { pattern: /^[0-9]+$/, message: '请输入整数', trigger: ['change', 'blur'] }],
    remark: [{ required: true, message: '请输入调整原因' }]
  },
  getParams: (model: any) => {
    const { inc_type, safty, remark, colonel_id, extend_type } = model;
    return {
      inc_type,
      safty,
      remark,
      colonel_id,
      extend_type
    };
  },
  onShow: (mode = 0, data: any) => {
    if (data) {
      state.model = {
        ...state.model,
        colonel_id: data.colonel_id,
        dyj_safty: data.dyj_safty
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 1) {
      const res = await colonelAdjust(model);
      if (!res.err) {
        ElMessage.success('调整保证金成功');
        emits('success');
      }
      return res;
    }

  }
});

defineExpose({
  show: methods.show
});
</script>
